<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<script>
    //使用promise封装ajax

    // 函数执行顺序: 同步任务– > 异步任务(微任务– > 宏任务)
    //  promise：

    // （ 特征） 三个状态， 一旦改变不可逆（ pending— > fulfilled 成功， pending— > rejected 失败）
    //  作用： 用于解决异步编程的问题（ 例如回调地狱）
    //  用法： 本身是一个构造函数, 使用new关键字创建promise异步任务对象， 根据结果调用成功回调函数还是失败回调函数
    //  调用过程：
    //   1. pending— > 调用resolve方法— > fulfilled 成功— > 执行.then的第一个参数onfulfilled方法
    //   2. pending— > 调用reject方法-- -- > rejected 失败— > 执行.then的第二个参数onrejected方法

    function getJSON(url) {
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest()
            xhr.open('GET', url, true) //true是异步
            xhr.send(null)
            // 设置状态的监听函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState !== 4) {
                    return
                }
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response) // responseText 是 json格式
                } else {
                    reject(new Error(xhr.statusText))
                }
            }
            // 设置错误的监听函数
            xhr.onerror = function () {
                reject(new Error(xhr.statusText))
            }
            // 设置响应数据类型
            xhr.responseType = 'json'
        })
    }

    /*getJSON('https://mock.presstime.cn/mock/6360bd8828238a008887296c/demo/query').then((data) => {
        console.log(data) // 转换json  json.parse(data)
    }).catch((err) => {
        console.log(err)
    })*/

    async function getData(url) {
        let res = await getJSON(url)
        return await res.data[0]
    }

    getData('https://mock.presstime.cn/mock/6363281d3ea049008282ebc9/query')
        .then(data => {
            console.log(data)
        }).catch(err => log(err))
</script>
</body>

</html>
